<template>
	<view class="content">
		<view class="header">
			<text class="welcome-text">欢迎来到福州旅游指南</text>
			<text class="subtitle">探索福州的美食与景点</text>
		</view>
		
		<view class="main-container">
			<!-- 左侧大的景点按钮 -->
			<button class="menu-button main-button scenery-button" @click="goToScenery">
				<image class="button-icon" src="/static/index/景点.png"></image>
				<text class="button-text">景点浏览</text>
			</button>
			
			<!-- 右侧垂直排列的美食和我的按钮 -->
			<view class="right-buttons">
				<!-- 美食按钮 -->
				<button class="menu-button sub-button food-button" @click="goToFood">
					<image class="button-icon" src="/static/index/美食.png"></image>
					<text class="button-text">美食推荐</text>
				</button>
				
				<!-- 我的按钮 -->
				<button class="menu-button sub-button mine-button" @click="goToMine">
					<image class="button-icon" src="/static/index/我的.png"></image>
					<text class="button-text">我的</text>
				</button>
			</view>
		</view>

		<!-- 福州介绍栏目 -->
		<view class="section fuzhou-intro">
			<view class="section-header" @click="goToAboutFuzhou">
				<text class="section-title">福州介绍</text>
				<text class="section-more">更多 <image src="/static/index/箭头.png" class="arrow-icon"></image></text>
			</view>
			<view class="section-content">
				<view class="intro-card">
					<image class="intro-image" src="/static/scenicspot/fdwh.png"></image>
					<view class="intro-text">
						<text class="intro-title">千年古城，海滨邹鲁</text>
						<text class="intro-desc">福州，福建省省会，中国历史文化名城，拥有2200多年建城史，是海上丝绸之路的重要起点之一。</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 今日栏目 -->
		<view class="section today-section">
			<view class="section-header">
				<text class="section-title">今日景点</text>
				<text class="section-more">更多 <image src="/static/index/箭头.png" class="arrow-icon"></image></text>
			</view>
			<view class="section-content">
				<view class="today-cards">
						<view class="today-card" @click="goToScenicDetail('sfqx-detail')">
							<image class="today-image" src="/static/scenicspot/sfqx.jpg"></image>
							<text class="today-title">三坊七巷</text>
						</view>
						<view class="today-card" @click="goToScenicDetail('gs-detail')">
							<image class="today-image" src="/static/scenicspot/gs.jpg"></image>
							<text class="today-title">鼓山景区</text>
						</view>
						<view class="today-card" @click="goToScenicDetail('fj-detail')">
							<image class="today-image" src="/static/scenicspot/fj.jpg"></image>
							<text class="today-title">闽江夜游</text>
						</view>
					</view>
			</view>
		</view>

		<!-- 今日美食栏目 -->
		<view class="section food-section">
			<view class="section-header">
				<text class="section-title">今日美食</text>
				<text class="section-more">更多 <image src="/static/index/箭头.png" class="arrow-icon"></image></text>
			</view>
			<view class="section-content">
				<view class="food-cards">
					<view class="food-card" @click="goToFoodDetail('yw-detail')">
						<image class="food-image" src="/static/food/yw.jpg"></image>
						<text class="food-title">鱼丸</text>
						<text class="food-desc">福州传统名吃</text>
					</view>
					<view class="food-card" @click="goToFoodDetail('ry-detail')">
						<image class="food-image" src="/static/food/ry.jpg"></image>
						<text class="food-title">肉燕</text>
						<text class="food-desc">非遗美食</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转到美食页面
			goToFood() {
				uni.switchTab({
					url: '/pages/food/food'
				})
			},
			// 跳转到景点页面
			goToScenery() {
				uni.switchTab({
					url: '/pages/scenery/scenery'
				})
			},
			// 跳转到我的页面
			goToMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			// 跳转到福州介绍页面
			goToAboutFuzhou() {
			uni.navigateTo({
				url: '/pages/about-fuzhou/about-fuzhou'
			})
		},
		goToScenicDetail(pageName) {
			uni.navigateTo({
				url: '/pages/scenery/' + pageName
			})
		},
		goToFoodDetail(pageName) {
			uni.navigateTo({
				url: '/pages/food/' + pageName
			})
		}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		min-height: 100vh;
		background-color: rgba(26, 95, 122, 0.3);
	}

	.header {
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		text-align: center;
	}

	.welcome-text {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.subtitle {
		font-size: 32rpx;
		color: #666;
		display: block;
	}

	/* 主容器设置为左右布局 */
	.main-container {
		display: flex;
		width: 100%;
		gap: 20rpx;
		padding: 0 40rpx;
	}
	
	/* 右侧按钮容器设置为垂直布局 */
	.right-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		flex: 1.2; /* 扩大右侧按钮容器宽度 */
	}

	.menu-button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		border: none;
		font-size: 36rpx;
		color: #333;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
		background-color: rgba(255, 255, 255, 0.7);
	}
	
	.menu-button:focus {
		animation: breath 2s infinite;
		outline: none;
	}
	
	@keyframes breath {
		0% {
			opacity: 0.7;
			transform: scale(1);
		}
		50% {
			opacity: 0.9;
			transform: scale(1.02);
		}
		100% {
			opacity: 0.7;
			transform: scale(1);
		}
	}

	.menu-button:active {
		transform: scale(0.98);
	}
	
	/* 主按钮样式 - 景点按钮 */
	.main-button {
		flex: 1; /* 缩小景点按钮宽度 */
		padding: 40rpx 20rpx;
	}
	
	/* 子按钮样式 - 美食和我的按钮 */
	.sub-button {
		flex: 1;
		padding: 30rpx 20rpx;
		width: 100%; /* 确保宽度占满容器 */
		height: 140rpx; /* 设置固定高度确保两个按钮高度一致 */
	}

	.food-button {
		background-color: rgba(255, 255, 255, 0.7);
		width: 100%; /* 确保美食按钮宽度占满父容器 */
	}

	.scenery-button {
		background-color: rgba(255, 255, 255, 0.7);
	}

	.mine-button {
		background-color: rgba(255, 255, 255, 0.7);
		width: 100%; /* 确保我的按钮宽度占满父容器 */
	}

	.button-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 15rpx;
	}

	.button-text {
		font-weight: bold;
	}

	/* 通用栏目样式 */
	.section {
		width: calc(100% - 80rpx); /* 减去左右各40rpx的padding，与按钮宽度一致 */
		margin-top: 60rpx;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
	}
	
	.section:focus-within {
		animation: breath 2s infinite;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.section-more {
		font-size: 28rpx;
		color: #666;
		display: flex;
		align-items: center;
		gap: 5rpx;
	}
	
	.arrow-icon {
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		vertical-align: middle;
	}
	
	/* 确保image标签正确渲染 */
	.section-more image {
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
	}

	.section-content {
		/* 内容区域 */
	}

	/* 福州介绍栏目样式 */
	.fuzhou-intro .intro-card {
		display: flex;
		gap: 20rpx;
	}

	.fuzhou-intro .intro-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.fuzhou-intro .intro-text {
		flex: 1;
	}

	.fuzhou-intro .intro-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.fuzhou-intro .intro-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 今日栏目样式 */
	.today-cards {
		display: flex;
		gap: 20rpx;
		justify-content: space-between;
	}

	.today-card {
		flex: 1;
		text-align: center;
	}

	.today-image {
		width: 100%;
		height: 160rpx;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
	}

	.today-title {
		font-size: 28rpx;
		color: #333;
	}

	/* 今日美食栏目样式 */
	.food-cards {
		display: flex;
		gap: 20rpx;
		justify-content: space-between;
	}

	.food-card {
		flex: 1;
		text-align: center;
	}

	.food-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.food-title {
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 5rpx;
	}

	.food-desc {
		display: block;
		font-size: 24rpx;
		color: #999;
	}
</style>
